<template>
	<div class="homepage">
	<product v-show="isProductShow"></product>
	<myself v-show="isMyselfShow"></myself>
	<footer class="footer">
	<div class="left" :class="press ? 'newsactive' : ''" @click="news">
	<i class="el-icon-erp-icon-- icon"></i>
	    <p>公司新闻</p>
	</div>
	<div class="middle" :class="products ? 'productactive' : ''" @click="product">	    
        <i class="el-icon-goods icon"></i>
	    <p>产品中心</p>
	</div>
	<div class="right" :class="customers ? 'peopleactive' : ''" @click="customer">
	   <i class="el-icon-erp-yonghu icon"></i>
	   <p>我的</p>
	</div>
	</footer>
	</div>
</template>

<script>
import product from '@/views/product/product'
import myself from '@/views/MemberCenter/myself'
	export default {
		name:'homepage',
		components:{
			product,
			myself,
		},
		data () {
			return {
				press:false,
			    products:false,
			    customers:true,
			    isProductShow:false,
			    isMyselfShow:true
			}
		},
		mounted () {
			if(this.$route.params.isProduct){				
				this.products = true;
				this.isProductShow = true;
				this.customers = false;
				this.isMyselfShow = false;
				this.press = false;
			}
		},
		methods:{
			news () {
				this.press = true;
				this.products = false;
				this.customers = false;
				this.isMyselfShow = false;
				this.isProductShow = false;
			},
			product () {
				this.press = false;
				this.products = true;
				this.customers = false;
				this.isProductShow = true;
				this.isMyselfShow = false;
			},
			customer () {
				this.press = false;
				this.products = false;
				this.customers = true;
				this.isProductShow = false;
				this.isMyselfShow = true;
			},			
		}
	}
</script>

<style lang="less" scoped>
    .homepage{
    	width:100%;
    	height: 100%;
    	display: flex;
    	flex-direction: column;
    	.footer{    		
    		position: fixed;
    		height: 1.5625rem;
    		bottom: 0;
    		left: 0;
    		z-index: 88;
    		background: #FFFFFF;
    		width:100%;
    		font-size: 26px;
    		display: flex;
    		.icon{
    			font-size: 50px;
    		}
    		.left{
    			margin-top: 0.19rem;
    			flex: 1;
    			text-align: center;
    			&.newsactive{
    				color: #FF0000;
    			}
    		}
    		.middle{
    			margin-top: 0.19rem;
    			flex: 1;
    			text-align: center;
    			&.productactive{
    				color: #FF0000;
    			}
    		}
    		.right{
    			margin-top: 0.19rem;
    			flex: 1;
    			text-align: center;
    			&.peopleactive{
    				color: #FF0000;
    			}
    		}
    	}
    }
</style>